@use "../AuditCode/AuditCode.module.scss";
%display-flex-center {
    display: flex;
    align-items: center;
}
%display-justify-between {
    display: flex;
    justify-content: space-between;
}
%font {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}
%tip {
    position: relative;
    height: 22px;
    text-align: center;
    color: var(--Colors-Use-Neutral-Disable);
    font-size: 11px;
    line-height: 22px;
}
.global-filter-function {
    overflow-y: auto;
    height: 100%;
    .search-icon {
        svg {
            height: 16px;
            width: 16px;
            color: var(--Colors-Use-Neutral-Text-1-Title);
        }
    }
    .progress-opt {
        padding: 8px;
        display: flex;
        gap: 6px;
    }
}

.global-filter-function-item {
    @extend %display-flex-center;
    @extend %display-justify-between;
    overflow: hidden;
    flex: 1;
    cursor: pointer;
    border-radius: 2px;
    user-select: none;
    &:hover {
        background-color: var(--Colors-Use-Neutral-Bg);
    }
    .search-icon {
        cursor: pointer;

        svg {
            width: 16px;
            height: 16px;
            &:hover {
                color: var(--Colors-Use-Main-Primary);
            }
        }
    }
    .item-left {
        @extend %display-flex-center;
        @extend %font;
        color: var(--Colors-Use-Neutral-Text-1-Title);
        overflow: hidden;
        gap: 4px;
        .name {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
        }
    }
    .item-right {
        @extend %display-flex-center;
        @extend %font;
        gap: 4px;
        color: var(--Colors-Use-Neutral-Text-1-Title);
        overflow: hidden;
        .fileName {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
        }
    }
}
